<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		   .html()           无参---功能：获取匹配元素中第一元素的内容
		                     有参---功能：【设置】将匹配元素集合中所有元素替换为新元素
			特点： 针对  内容  +   元素				 
		   .val()            无参---功能：表单内元素：input、select生效
		                                 获取表单元素中第一元素的内容
							 有参---功能：表单内元素：input、select生效
			               		        input元素直接显示 value
								        select元素不是直接显示 value
										option 元素中内容：用户显示
										option 元素中value值，
										必须当前select中，option元素value值
										直接赋值：打印select元素对象名称[object Object]
			特点：针对表单(表单内form元素可以包裹)元素的内容	
									
		   .text()           无参---功能：获取匹配元素集合中所有元素的文本内容
		                     有参---功能：【设置】匹配元素集合中所有元素的文本
							            内容替换
			特点：元素中存在内容							
		 -->
		   <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮—针对html()函数—有参</button>
		<span>我要打上海major~</span>
		<span>全场欢呼~</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" placeholder="输入框显示效果[提示]">
		<input type="text" placeholder="输入框显示效果[提示]">
		<!-- html: 按钮  |  下拉列表  select>option*3 需要加value -->
		<button>按钮-针对val()函数-有参</button>
		<select name="" id="">
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text（）函数-无参</button>
		<button class="btn2">按钮-针对text（）函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		<!-- jq: 点击按钮,设置下拉列表的值  | html()与val()有参是否存在区别 -->
		<script>
			//1.找到 类名为btn1 的按钮--点击---弹窗内容p的
			$("button").click(function(){
			  var se=$("p").text();
			  alert("text无参"+se);
			});
			//2.找到 类名为 btn2 的按钮--点击---lorem4\5\6 改成 "修改文本" 【有参】
			$("button").click(function(){
			  $("p").text("修改文本");
			  });
			
			
			
		//	$("button").click(function(){
				//设置元素第一个的值   1.直接设置下拉列表中value的值
			//	$("select").val("rem2");
				//设置元素第一个的值   2.给第一个值添加，设置的内容【本身存在】
		//		var se=$("select").val();
				//抓下拉列表的value值---select
				
				//[object Object] JavaScript中 对象的默认字符串表示形态
				//select元素 对象 输出[object Object]
				//value的值:真实数据 option中值:显示数据
				//object Object  测试:var无参
		//		alert("val()函数有参:"+se);
	//		});
			
			
			
			
			
			//动态效果：点击按钮，获取第一个表单元素的内容，打印出来
		//	$("button").click(function(){
				/* 注意：js变量名不可以为关键字！  in是关键字 */
		//		var miao=$("input").val();
		//		alert("val()函数无参："+miao)
			//});
			
			
			
			
			
			//有参：点击按钮--下面两个span  改成 lorem3、lorem4
		//	 $("button").click(function(){
			//	 $("span").html("<span>lorem</span>");
		//	 });
			
			
			//js变量【var i=1】==jq变量   var 变量名=值、元素
			//无参数   html() 函数使用
		//	 var html=$("span").html();
			 // BOM方式 打印数据
		//	 alert("无参数获取第一个元素内容："+html);
			 
			 
			 
		</script>
	</body>
</html>